DiscGolf.Views['addCharacter'] = Backbone.View.extend( {

    events: {
    
    },

    initialize: function() {

        this.render();
    },

    render: function() {

        this.subHeader =
            this.makeEl( 'div' ).text( 'Character Creation : ' )
                                .css( { 'font-size': '1em',
                                        'padding': '1em',
                                        'border-bottom': '1px solid white',
                                        'color': 'white',
                                        'text-align': 'center' } ).appendTo( this.$el ); 


        var heightLeft = this.$el.outerHeight( true ) - this.subHeader.outerHeight( true );

        this.make3dBox( { heightLeft: heightLeft } );

        this.makeEditPanel( { heightLeft: heightLeft } );
        
        this.$el.append( this.makeEl('div').css( { 'clear': 'both' } ) );
    
        return this;
    },

    makeEditPanel: function( p ) {

   
        this.editPanel =
            this.makeEl( 'div' ).css( { 'float': 'left',
                                        'overflow': 'auto' } )
                                .width( '50%' )
                                .height( p.heightLeft )
                                .appendTo( this.$el );

        this.accordionElement = this.makeEl( 'div' ).appendTo( this.editPanel );

        this.editPanelAccordion =
            new DiscGolf.Views['accordion']( {
                el: this.accordionElement,
                content: [
                    { 'header': 'Character Info', 'view': new DiscGolf.Views[ 'characterInfo' ]() },
                    { 'header': 'Head', 'view': new DiscGolf.Views[ 'headCreator' ]( { default: this.headMesh } ) } ] } );
    },

    make3dBox: function( p ) {
        
        this.clock = new THREE.Clock();

        this.leftContainer =
            this.makeEl( 'div' ).css( { 'float': 'left' } )
                                .height( p.heightLeft )
                                .width( '50%' ).appendTo( this.$el );
                                        

        this.threeJsContainer  =
            this.makeEl( 'div' ).css( { 'float': 'left',    
                                        'border-right': '1px solid white' } )
                                .height( '100%' )
                                .width( '100%' )
                                .appendTo( this.leftContainer );

        this.scene = new THREE.Scene();

        var sceneWidth = this.threeJsContainer.outerWidth( true );

        var viewAngle = 6;
        var aspect = sceneWidth / p.heightLeft;
        var near = 0.1;
        var far = 20000;

        this.camera = new THREE.PerspectiveCamera( viewAngle, aspect, near, far );

        this.scene.add( this.camera );

        this.camera.position.set( 0, 10, 350 );

        DiscGolf.camera = this.camera;

        this.camera.lookAt( this.scene.position );  

        this.renderer = ( Detector.webgl )
            ? new THREE.WebGLRenderer( { antialias: true } )
            : new THREE.CanvasRenderer()

        this.renderer.setSize( this.threeJsContainer.outerWidth( true ), p.heightLeft );
                
        THREEx.WindowResize( this.renderer, this.camera );

        //var light = new THREE.PointLight( 0xffffff );
        //light.position.set( 0, 250, 0 );
        //this.scene.add( light );

        this.generateDefaultCharacter( {
            renderArea: { width: this.threeJsContainer.outerWidth( true ),
                          height: p.heightLeft } } );

        this.scene.add( this.playerModel );
        
        DiscGolf.playerModel = this.playerModel;

        this.camera.lookAt( this.playerModel.position );
        this.camera.updateProjectionMatrix();
                
        this.threeJsContainer.append( this.renderer.domElement );
    
        this.animate3dBox();
    },

    generateDefaultCharacter: function() {

        var skinMaterial = new THREE.MeshBasicMaterial( { color: new THREE.Color( 0xeebb99 ) } );

        var headGroup = new THREE.Object3D();
        var upperBody = new THREE.Object3D();
       
        var legGeometry = new THREE.CubeGeometry( 4, 12, 4 );
        var leftLeg = new THREE.Mesh( legGeometry, skinMaterial );

        leftLeg.position = new THREE.Vector3( 0, -6, -2 );

        var rightLeg = new THREE.Mesh( legGeometry, skinMaterial );

        rightLeg.position.z = 2;
        rightLeg.position.y = -6;

        var bodyGeometry = new THREE.CubeGeometry( 4, 12, 8 );
        var bodyMesh = new THREE.Mesh( bodyGeometry, skinMaterial );

        upperBody.add( bodyMesh );
        
        var armGeo = new THREE.CubeGeometry(4, 12, 4);
        var leftArm = new THREE.Mesh( armGeo, skinMaterial );

        leftArm.position.z = -6;
        leftArm.position.y = 4;
        //leftArm.rotation.x = Math.PI/32;

        upperBody.add( leftArm );
        
        var rightArm = new THREE.Mesh( armGeo, skinMaterial );

        rightArm.position.z = 6;
        rightArm.position.y = 4;
        //rightArm.rotation.x = -Math.PI/32;

        upperBody.add( rightArm );
        
        var headGeometry = new THREE.CubeGeometry( 8, 8, 8 );
        this.headMesh = new THREE.Mesh( headGeometry, skinMaterial );

        this.headMesh.position.y = 2;

        headGroup.add( this.headMesh );

        var eyeGeometry = new THREE.SphereGeometry( .5, 8, 8 );
        var eyeMaterial = new THREE.MeshBasicMaterial( { color: new THREE.Color( 0x87421F ) } );

        this.leftEye = new THREE.Mesh( eyeGeometry, eyeMaterial ); 
        this.rightEye = new THREE.Mesh( eyeGeometry, eyeMaterial ); 

        headGroup.add( this.leftEye );
        headGroup.add( this.rightEye );

        this.leftEye.position.set( 4, 4, -2 );
        this.rightEye.position.set( 4, 4, 2 );

        var noseShape = new THREE.Shape();

        noseShape.moveTo( 0, 0 );
        noseShape.bezierCurveTo( .5, 0, .5, 1, 0, 1 );
        noseShape.bezierCurveTo( -.5, 1, -.5, 2, 0, 2 );
        noseShape.bezierCurveTo( .5, 2, .5, 1, 0, 3 );
        noseShape.bezierCurveTo( -.5, 3, -.5, 0, 0, 0 );

        var noseGeometry = new THREE.ExtrudeGeometry( noseShape, { amount: 20 } );

        var noseMesh =
            THREE.SceneUtils.createMultiMaterialObject(
                noseGeometry, [ new THREE.MeshLambertMaterial( { color: 'blue' } ),
                               new THREE.MeshBasicMaterial( { color: 'red', wireframe: false, transparent: false } ) ] );

        noseMesh.scale.set( .25, .25, .25 );

        headGroup.add( noseMesh );

        noseMesh.rotation.set( 1.5, 0, 0 );

        DiscGolf.noseMesh = noseMesh;


        headGroup.position.y = 8;
        
        this.playerModel = new THREE.Object3D();
       
        this.playerModel.add( leftLeg );
        this.playerModel.add( rightLeg );
        this.playerModel.add( upperBody );
        this.playerModel.add( headGroup );

        this.playerModel.leftLeg = leftLeg;
        this.playerModel.rightLeg = rightLeg;

        this.playerModel.leftArm = leftArm;
        this.playerModel.rightArm = rightArm;
        
        this.playerModel.upperBody = upperBody;
        this.playerModel.headGroup = headGroup;
        
        //playerGroup.scale.setLength(2);

        //playerModel.position.y = 18;

        this.playerModel.position.set( 0, 25.1, 0 );

    },

    animate3dBox: function() {

        requestAnimationFrame( $.proxy( this.animate3dBox, this ) );

        this.renderThree();       

        this.update();
    },

    renderThree: function()  {

        var time = ( Date.now() - this.clock.startTime ) / 1000;

        //this.playerModel.rightArm.rotation.z = 2 * Math.cos(0.6662 * time*10 + Math.PI);
        //this.playerModel.rightArm.rotation.x = 1 * (Math.cos(0.2812 * time*10) - 1);

        //this.playerModel.leftArm.rotation.z = 2 * Math.cos(0.6662 * time*10);
        //this.playerModel.leftArm.rotation.x = 1 * (Math.cos(0.2312 * time*10) + 1);
    
        //this.playerModel.rightLeg.rotation.z = 1.4 * Math.cos(0.6662 * time*3);
        //this.playerModel.leftLeg.rotation.z = 1.4 * Math.cos(0.6662 * time*3 + Math.PI);
        
        //playerInfo.legs.leftleg.rotation.y = 1.4 * Math.cos(0.6662 * time*10 + Math.PI);
        //rotate z for cube and cylinder, y for extrude

        var pos = time*0.9;
        
        this.playerModel.rotation.y = -(pos);
        
        this.renderer.render( this.scene, this.camera );
    },

    update: function() {
    }

} );
